<template>
  <div id="personal">

    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公共通讯录</el-breadcrumb-item>
      <el-breadcrumb-item>全部</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div id="list">
            公共通讯录 <i class="el-icon-circle-plus-outline" id="font"></i>
            <el-menu default-active="999" class="el-menu-vertical-demo" background-color="#ffffff" text-color="#000" active-text-color="#ffd04b">
              <el-menu-item index="999">
                <span slot="title" @click="chooseGroup($event)">全部</span>
              </el-menu-item>

              <el-menu-item :index="v.group_id.toString()" v-for="(v, i) in  groupdata" :key="i">
                <span slot="title" @click="chooseGroup($event)">{{  groupdata[i].group_name }}</span>
              </el-menu-item>
            </el-menu>
          </div>

        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <div id="listbox">
            <el-row>
              <el-button type="primary" @click="addbtn">新增</el-button>
              <!-- <el-button type="primary">外部邮件</el-button> -->
              <!-- <el-button type="primary">短信</el-button> -->
              <el-button type="primary" @click="delbtn">删除</el-button>
              <!-- <el-button type="primary">导入</el-button> -->
              <!-- <el-button type="primary">导出</el-button> -->
              <SearchInput></SearchInput>
            </el-row>
          </div>

        </div>

        <!-- <Letterlist /> -->
        <div>
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="chooseCheckbox" @select-all="chooseCheckbox">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="public_name" label="名称" width="240">
            </el-table-column>
            <el-table-column prop="public_tele" label="手机号码" width="180">
            </el-table-column>
            <el-table-column prop="public_phone" label="座机" width="180">
            </el-table-column>
            <el-table-column prop="public_address" label="地址" show-overflow-tooltip>
            </el-table-column>

          </el-table>
        </div>

        <div>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
          </div>
        </div>
        <!-- 增加按钮弹框 -->
        <div>
          <el-dialog title="新增" :visible.sync="visible">
            <el-form :model="form">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" :label-width="formLabelWidth">
                <el-input v-model="form.tele" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="座机" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="选择分组" :label-width="formLabelWidth">
                <el-select v-model="form.group" placeholder="请选择分组" @change="currentSel">
                  <el-option v-for="(v, i) in groupdata" :key="i" :label="v.group_name" :value="v.group_id">

                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closedialog">取 消</el-button>
              <el-button type="primary" @click="addsure">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <!-- 删除分组的弹框 -->
        <div>
          <el-dialog title="系统提示" :visible.sync="visible_2" width="30%">
            <span>确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closedialog">取 消</el-button>
              <el-button type="primary" @click="delsure">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Letterlist from "../components/Letterlist.vue";
import SearchInput from "../components/SearchInput.vue";
export default {
  components: {
    Letterlist,
    SearchInput,
  },

  data() {
    return {
      currentPage: 1,
      count: 10,
      checkGroup: "",
      tableData: [],
      total: 0,
      groupdata: [],
      visible: false,
      visible_2: false,

      form: {
        name: '',
        tele: '',
        phone: '',
        address: '',
        group: '',

      },
      formLabelWidth: '120px',
      delarr: [],//数据选中时存储的位置
      delarrNumber: [],
      treeData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleSizeChange(val) {

      this.count = val
    },
    handleCurrentChange(val) {

      this.currentPage = val
    },
    handleNodeClick(data) {
      console.log(data);
    },
    //获取公共通讯录的数据
    getpublic() {
      this.$axios({
        url: "/addressbook/public/get",
        params: {
          count: this.count,
          page: this.currentPage,
          input2: this.input2,
          checkGroup: this.checkGroup
        },
      }).then((res) => {

        this.tableData = res.data.searchDate;
        this.groupdata = res.data.data;
        this.total = res.data.total;

      });
    },
    // 点击增加按钮
    addbtn() {
      this.visible = true

    },
    //获取下拉框的值
    currentSel(selVal) {
      this.form.group = selVal;
      console.log(selVal);
    },
    // 点击取消关闭弹框
    closedialog() {
      this.visible = false;
      this.visible_2 = false;
    },
    // 点击确认增加数据
    addsure() {
      this.visible = false;
      this.$axios({
        url: "/addressbook/public/add",
        method: "post",
        data: {
          name: this.form.name,
          tele: this.form.tele,
          phone: this.form.phone,
          address: this.form.address,
          group: this.form.group,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // 需要更新数据
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getpublic();

          this.form.name = "";
          this.form.tele = "";
          this.form.phone = "";
          this.form.address = "";
          this.form.group = "";
        }
      });
    },
    // 有数据选中时可以点击删除按钮
    chooseCheckbox(selection, row) {

      this.delarr = selection;
      console.log(this.delarr);
    },
    // 点击删除按钮
    delbtn() {
      if (this.delarr.length) {
        this.visible_2 = true;

        for (let i = 0; i < this.delarr.length; i++) {
          this.delarrNumber.push(this.delarr[i].public_id);

        }

      } else {
        alert("未选中数据");
      }
    },
    // 删除确定
    delsure() {
      this.visible_2 = false;

      this.$axios({
        url: "/addressbook/public/del",
        method: "post",
        data: {
          arr: this.delarrNumber,
        },
      }).then((res) => {
        this.getpublic()
        this.delarrNumber = [];
        if (res.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: "success",
          });

        }
      });
    },
    // 切换侧边分组
    chooseGroup(e) {
      let str = e.currentTarget.innerHTML
      let str1 = str.split('(')[0]
      if (str1 == '全部') {
        this.checkGroup = ''
      } else { this.checkGroup = str1 }
      this.getpublic()
    }
  },
  watch: {
    input2: function () {
      this.getpublic()
      this.currentPage1 = 1;


    },


  },
  created: function () {
    this.getpublic()

  },
  computed: {
    input2: function () {
      return this.$store.state.Addressbook.input2;
    },
  }
};
</script>

<style scoped>
span[data-v-7a232245] {
  display: inline-block;
  height: 100%;
  width: 120px;
}
.block {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
#personal {
  height: 100%;
  text-align: left;
  line-height: 16px;
}
.el-breadcrumb {
  height: 7%;
}
.row-bg {
  background-color: white;
  height: 93%;
}
#font {
  padding-left: 20px;
  cursor: pointer;
}
.el-col-4 {
  border: 1px solid #f2f2f2;
}
.el-col-20 {
  text-align: left;
}
#list,
#listbox,
#select {
  margin: 20px 0 0 20px;
  font-size: 16px;
  line-height: 16px;

  text-align: left;
}
#list {
  position: relative;
}

.el-menu-vertical-demo {
  margin-top: 10px;
}
#tree {
  margin-top: 20px;
}
</style>